<!DOCTYPE html>
<html lang="en" xmlns:http="http://www.w3.org/1999/xhtml" xmlns: xmlns:>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>福山</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <!-- <link rel="stylesheet" type="text/css" href="../css/element/elemet-ui.css" /> -->
    <link rel="stylesheet" type="text/css" href="../css/swiper/swiper-4.1.6.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/rem.css" />
    <link rel="stylesheet" href="../js/map/DrawingManager_min.css">
    <style>
        #app {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        {{newCount}}
        <div @click="showRoute()" style="width:100px;height:100px;background:skyblue;"></div>
        <div id="allmap" style="margin-left:0px;margin-top:0px;width:100%;height:850px;"></div>
    </div>
    <!-- 引入组件库 -->
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="./js/vue/vue.js"></script> -->

    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->

    <script type="text/javascript" src="../js/swiper/swiper-4.1.6.min.js"></script>
    <script type="text/javascript" src="../js/urls.js"></script>
    <script src="../js/map/baiduInterface.js"></script>
    <!-- <script src="../js/map/mapFunction.js"></script> -->
    <script type="text/javascript" src="../js/vue/vue.js"></script>
    <!-- <script type="text/javascript" src="../js/element/element.js"></script> -->
    
    <script type="text/javascript">
        var vm;
        vm = new Vue({
            el: '#app',
            data: {
                newCount: 0
            },
            created: function () {

            },
            mounted: function () {
                var centerPoint;
                var map;
                var centX = 121.27483;
                var centY = 37.510207;
                var landmarksInObj = Array();
                var landmarksOutObj = Array();
                var landmarksHotObj = Array();
                var sequenceObj = Array();

                var inPNG = "wifiin.png";
                var outPNG = "wifi.png";
                var hotPNG = "fence.png";

                var dist = 0.0035;

                var outputPath = '../js/map/';
                var minLevel = 11;
                var maxLevel = 18;
                var format = '.png';
                var tileLayer = new BMap.TileLayer();
                tileLayer.getTilesUrl = function (tileCoord, zoom) {
                    var x = tileCoord.x;
                    var y = tileCoord.y;
                    var url = outputPath + zoom + '/' + x + '/' + y + format;
                    // console.log(outputPath+zoom)
                    return url;
                }
                var MyMap = new BMap.MapType('MyMap', tileLayer, { minZoom: minLevel, maxZoom: maxLevel });
                map = new BMap.Map('allmap', { mapType: MyMap });
                map.enableScrollWheelZoom();
                var centerContent =
                    "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>设备详情</h4>" +
                    //"<img style='float:right;margin:4px' id='imgDemo' src='../map/maozi.png' width='128' height='128' title='logo'/>" + 
                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>设备编号：0034093409</p>" +
                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>设备安装地点：金运宾馆</p>" +
                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>设备IP：192.23.24.12</p>" +
                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>设备经纬度：22.7857794081,103.2355470817</p>" +
                    "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>最近采集时间：2017-8-31 14：30:48</p>" +
                    "</div>";

                map.centerAndZoom(new BMap.Point(centX, centY), 15);

                var icon = new BMap.Icon('../assets/img/wifi.png', new BMap.Size(64, 64));
                var p = new BMap.Point(centX, centY);
                var marker = new BMap.Marker(p, { icon: icon, enableClicking: false, enableDragging: false });
                map.addOverlay(marker);
                //移除百度logo
                //setTimeout(function(){$('.anchorBL, .BMap_cpyCtrl').remove();},200);
                function toggleManyLandmarks(type) {
                    var png, obj;
                    //map.clearOverlays(); 
                    switch (type) {
                        case 1: png = inPNG; obj = landmarksInObj; break;
                        case 2: png = outPNG; obj = landmarksOutObj; break;
                        case 3: png = hotPNG; obj = landmarksHotObj; break;
                    }

                    //debugger;

                    // if show all landmarks
                    if (obj.length <= 0) {

                        for (var i = 1; i <= 20; i++) {
                            var newx = Math.random() / (0.5 / dist) - dist + centX;
                            var newy = Math.random() / (0.5 / dist) - dist + centY;
                            addLandmark([newx, newy, "null"], png, function (m) {
                                obj.push(m);
                                var r = Math.random() * 2000;
                                setTimeout(function () { m.setAnimation(BMAP_ANIMATION_BOUNCE); }, r);
                                setTimeout(function () { m.setAnimation(); }, r + 4000);

                            });

                            //console.log("add:"+info[0]+","+info[1]);
                            //跳动的动画
                        }
                    }

                    //if clear all landmarks
                    else if (obj.length > 0) {
                        for (var i = 0; i < obj.length; i++) {
                            //debugger;
                            map.removeOverlay(obj[i]);
                        }
                        if (type == 1) landmarksInObj = [];
                        if (type == 2) landmarksOutObj = [];
                        if (type == 3) landmarksHotObj = [];
                    }
                }

                function mapRefresh() {
                    map.centerAndZoom(centerPoint, 18);
                }

                //加入单个地标，pointStr="X$Y$地标说明", activate为是否立刻激活地标
                function addLandmark(info, iconImg, callback) {

                    //var info = pointStr.split('$');
                    // 创建信息窗口对象

                    var icon = new BMap.Icon('../assets/img/' + iconImg, new BMap.Size(48, 48), { anchor: new BMap.Size(15, 15) });
                    var p = new BMap.Point(parseFloat(info[0]), parseFloat(info[1]));
                    var marker = new BMap.Marker(p, { icon: icon });

                    if (info[2]) {
                        var infoWindow = new BMap.InfoWindow(info[2], { width: 350 });
                        marker.addEventListener("click", function () {
                            this.openInfoWindow(infoWindow);
                            $(".btn-group > .btn").click(function () {
                                $(this).addClass("active").siblings().removeClass("active");
                            });
                        });
                    }
                    map.addOverlay(marker);
                    if (callback) callback(marker);

                    //立刻激活地标
                    //if(activate) $(marker.F).trigger('click');

                    //setTimeout(function(){map.panTo(p,{noAnimation:false});},500);
                }

                function addSequenceMark(info, seq, callback) {
                    addLandmark(info, 'smallSunshine.gif', callback);
                    var myLabel = new BMap.Label(seq + "", { offset: new BMap.Size(-2, -20), position: new BMap.Point(info[0], info[1]) });
                    myLabel.setStyle({

                        "color": "white", //颜色
                        "fontSize": "24px", //字号
                        "padding": "0",
                        "fontWeight": "bold",
                        "border": "0px", //边
                        "textAlign": "center", //文字水平居中显示
                        "lineHeight": "48px", //行高，文字垂直居中显示
                        "cursor": "pointer"
                    });

                    map.addOverlay(myLabel);
                }

                function addLabel(info, label, callback) {
                    var myLabel = new BMap.Label(label, { offset: new BMap.Size(-15, 8), position: new BMap.Point(info[0], info[1]) });
                    myLabel.setStyle({

                        "color": "red", //颜色
                        "fontSize": "16px", //字号
                        "padding": "0",
                        "fontWeight": "bold",
                        "border": "1px", //边
                        "textAlign": "center", //文字水平居中显示
                        "lineHeight": "24px", //行高，文字垂直居中显示
                        "cursor": "pointer",
                        "backgroundColor": "white"
                    });

                    map.addOverlay(myLabel);
                    if (callback) callback(myLabel);
                }

                function addLine(info, color, callback) {
                    var ar = [];
                    for (var i = 0; i < info.length; i++) {
                        ar.push(new BMap.Point(info[i][0], info[i][1]));
                    }
                    var polyline = new BMap.Polyline(ar, {
                        strokeColor: color,
                        strokeWeight: 3,
                        strokeStyle: "dashed",
                        strokeOpacity: 0.2
                    });

                    map.addOverlay(polyline);
                    if (callback) callback(polyline);
                    return polyline
                }
                function deleteLine(polyline) {
                    polyline.forEach(val => {
                        map.removeOverlay(val)
                    })
                }

                function addLineBD(info, color, callback) {
                    var polyline = new BMap.Polyline(info, {
                        strokeColor: color,
                        strokeWeight: 3,
                        strokeStyle: "dashed",
                        strokeOpacity: 0.8
                    });
                    map.addOverlay(polyline);
                    if (callback) callback(polyline);
                }
                function showRoute() {
                    var c = 2
                    var centX = 103.2332322103;
                    var centY = 22.7852372591;
                    if (c >= 2) {
                        var route1 = [[centX, centY], [121.280, 37.516], [121.290, 37.536], [121.273, 37.526], [121.260, 37.533]];

                        for (var i = 0; i < route1.length; i++) {
                            addSequenceMark([route1[i][0], route1[i][1], "路径1，地点" + (i + 1)], i + 1, function (m) {
                                sequenceObj.push(m);
                            });
                            addLine(route1, "red")
                            // line1.push(addLine(route1,"red"))
                        }
                        var route2 = [[121.274, 37.517], [121.290, 37.506], [121.263, 37.540], [121.285, 37.536]];
                        for (var i = 0; i < route2.length; i++) {
                            addSequenceMark([route2[i][0], route2[i][1], "路径2，地点" + (i + 1)], i + 1, function (m) {
                                sequenceObj.push(m);
                            });
                            addLine(route2, "green")
                            // line2.push(addLine(route2,"green"));
                        }
                        // deleteLine(line1)
                        // toggle_rightbar();
                    } else if (c === 1) {
                        var route1 = [[centX, centY], [121.280, 37.516], [121.290, 37.536], [121.273, 37.526], [121.260, 37.533]];

                        for (var i = 0; i < route1.length; i++) {
                            addSequenceMark([route1[i][0], route1[i][1], "路径1，地点" + (i + 1)], i + 1, function (m) {
                                sequenceObj.push(m);
                            });
                            addLine(route1, "red")
                            // line1.push(addLine(route1,"red"))
                        }
                    }
                }

                showRoute()
            },
            methods: {
                // showRoute() {
                //     var c = 2
                //     //var centX=103.2332322103;
                //     //var centY=22.7852372591;
                //     if (c >= 2) {
                //         var route1 = [[centX, centY], [121.280, 37.516], [121.290, 37.536], [121.273, 37.526], [121.260, 37.533]];

                //         for (var i = 0; i < route1.length; i++) {
                //             addSequenceMark([route1[i][0], route1[i][1], "路径1，地点" + (i + 1)], i + 1, function (m) {
                //                 sequenceObj.push(m);
                //             });
                //             addLine(route1, "red")
                //             // line1.push(addLine(route1,"red"))
                //         }
                //         var route2 = [[121.274, 37.517], [121.290, 37.506], [121.263, 37.540], [121.285, 37.536]];
                //         for (var i = 0; i < route2.length; i++) {
                //             addSequenceMark([route2[i][0], route2[i][1], "路径2，地点" + (i + 1)], i + 1, function (m) {
                //                 sequenceObj.push(m);
                //             });
                //             addLine(route2, "green")
                //             // line2.push(addLine(route2,"green"));
                //         }
                //         // deleteLine(line1)
                //         // toggle_rightbar();
                //     } else if (c === 1) {
                //         var route1 = [[centX, centY], [121.280, 37.516], [121.290, 37.536], [121.273, 37.526], [121.260, 37.533]];

                //         for (var i = 0; i < route1.length; i++) {
                //             addSequenceMark([route1[i][0], route1[i][1], "路径1，地点" + (i + 1)], i + 1, function (m) {
                //                 sequenceObj.push(m);
                //             });
                //             addLine(route1, "red")
                //             // line1.push(addLine(route1,"red"))
                //         }
                //     }
                // }
            }
        })

    </script>
</body>

</html>